<template>
  <div id="empSalaryDiv" v-cloak>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="4">
          <el-select v-model="departId" placeholder="请选择部门" @change="departChange">
            <el-option v-for="item in departs" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="empId" placeholder="请选择员工" @change="empChange">
            <el-option
              v-for="item in emps"
              :key="item.userid"
              :label="item.name"
              :value="item.userid"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button v-if="isShowAdd" @click="addEmpSalary" type="primary">添加</el-button>
        </el-col>
      </el-row>

      <el-table :data="empSalaryTable" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="baseSalary" label="基本工资" width="180"></el-table-column>
        <el-table-column prop="performanceSalary" label="绩效工资"></el-table-column>
        <el-table-column prop="activeDate" label="生效日期"></el-table-column>
        <el-table-column prop="changeSalaryReseasonStr" label="调整原因"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.$index==0" @click="addEmpSalary">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="编辑人员薪资" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="empSalaryForm"
        :model="empSalaryForm"
        :rules="empSalaryFormRules"
        label-width="80px"
      >
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="empSalaryForm.name" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="基本工资" prop="baseSalary">
          <el-input v-model.number="empSalaryForm.baseSalary" size="small"></el-input>
        </el-form-item>
        <el-form-item label="绩效工资" prop="performanceSalary">
          <el-input v-model.number="empSalaryForm.performanceSalary" size="small"></el-input>
        </el-form-item>
        <el-form-item label="生效时间" prop="activeDate">
          <el-date-picker
            v-model="empSalaryForm.activeDate"
            type="date"
            size="small"
            style="width:388.797px;"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="调薪原因" prop="changeSalaryReseason">
          <el-select
            v-model="empSalaryForm.changeSalaryReseason"
            placeholder="请选择调薪原因"
            size="small"
            style="width:388.797px;"
          >
            <el-option key="1" label="调岗调薪" value="1"></el-option>
            <el-option key="2" label="入职" value="2"></el-option>
            <el-option key="3" label="转正" value="3"></el-option>
            <el-option key="4" label="调薪" value="4"></el-option>
            <el-option key="5" label="升职" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="isdisabled" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      corpId: null,
      isdisabled: false,
      departs: [],
      emps: [],
      departId: null,
      empId: null,
      empSalaryTable: null,
      isShowAdd: false,
      dialogVisible: false,
      empSalaryForm: {
        empId: null,
        name: null,
        baseSalary: 0,
        performanceSalary: 0,
        activeDate: null,
        changeSalaryReseason: null,
        departId: null
      },
      empSalaryFormRules: {
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        baseSalary: [
          { required: true, message: "请填写基本工资", trigger: "blur" }
        ],
        performanceSalary: [
          { required: true, message: "请填写绩效工资", trigger: "blur" }
        ],
        activeDate: [
          { required: true, message: "请选择生效日期", trigger: "blur" }
        ],
        changeSalaryReseason: [
          { required: true, message: "请选择调薪原因", trigger: "blur" }
        ]
      }
    };
  },
  created: function() {
    this.getJsApiTeckit();
    this.getEmpSalarys();
  },
  methods: {
    async getJsApiTeckit() {
      var result = await this.$httpd.get("/DingDingSecurity/GetJsapiTicket");
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.corpId = result.data.corpId;
      this.getCode(this.corpId);
    },
    getCode(corpId) {
      var that = this;
      that.$dd.ready(() => {
        that.$dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: function(info) {
            that.code = info.code;

            that.getDeparts(that.code);
          }
        });
      });
    }, 
    async getDeparts(code) {
      var result = await this.$httpd.get(`/EmpSalary/GetdepartmentList?code=${code}`);

      if (result.status != 200) {
        this.$message.error("获取部门数据出错");
        return;
      }
      this.departs = result.data;
    },
    departChange() {
      this.getEmps();
    },
    async getEmps() {
      var result = await this.$httpd.get(
        `/EmpSalary/GetUserSimplelist?dePartId=${this.departId}`
      );
      if (result.status != 200) {
        this.$message.error("获取员工数据错误");
        return;
      }
      this.emps = result.data;
    },
    empChange() {
      this.getEmpSalarys();
    },
    async getEmpSalarys() {
      var result = await this.$httpd.get(
        `/EmpSalary/QueryEmpSalarys?empId=${this.empId}`
      );
      if (result.status != 200) {
        this.$message.error("获取员工薪资数据错误");
        return;
      }
      this.empSalaryTable = result.data.data;
      if (this.empSalaryTable.length == 0 && this.empId != null) {
        this.isShowAdd = true;
      } else {
        this.isShowAdd = false;
      }
    },
    addEmpSalary() {
      this.dialogVisible = true;
      this.isdisabled=false;
      var currentEmp = this.emps.find(item => {
        return item.userid == this.empId;
      });
      this.empSalaryForm.name = currentEmp.name;
    },
    resetForm() {
      this.$refs.empSalaryForm.resetFields();
    },
    async submitForm() {
      this.$refs.empSalaryForm.validate(async v => {
        if (v) {
          this.empSalaryForm.empId = this.empId;
          this.empSalaryForm.departId = this.departId;
          var result = await this.$httpd.post(
            "/EmpSalary/Add",
            this.empSalaryForm
          );
          if (result.status != 200) {
            this.$message.error(result.data.message);
          } else {
            //禁用提交按钮
            this.isdisabled = true;
            this.dialogVisible = false;
            this.getEmpSalarys();
            this.resetForm();
            this.$message.success({
              message: result.data.message,
              type: "success"
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.el-card {
  height: 400px;
}
</style>